<template>
  <div>
    <div class="popover1">
      <input type="text" :placeholder="$t('public.pleaseEnter')" class="popover1_inpit" v-model.trim="nameSearch" v-on:keyup="searchTree"/>
      <div class="prompt" v-show="popoLoading">{{$t('webchat.loading')}}</div>
      <ul class="tree" v-show="onlineAgentsInvite.length && popoLoading === false">
        <li class="transfer_li_box" v-for="(model, index) in onlineAgentsInvite" :key="model._id">
          <div class="box1">
            <div :class="model.AssignMembers.length ? '' : 'subpadding'" class="transfer_li transfer_group clearBoth" @click.stop="togglePop(index)" :index="index">
              <span v-show="model.AssignMembers.length"><i :class="openPop.index===index&&openPop.isOn ? 'el-icon-minus' : 'el-icon-plus'"></i></span>
              <span v-show="model.AssignMembers.length > 0" class="transfer_li_title cata-name ellipsis" :title="model.DisplayName + '(' + model.AssignMembers.length + $t('webchat.onlineNum') + ')'">{{model.DisplayName}}({{model.AssignMembers.length}}{{$t('webchat.onlineNum')}})</span>
              <span class="transfer_btn iconfont icon-zhuanjie1 transfer_group_btn" @click.stop="transfer(model, 'transferGroup')"></span>
            </div>
          </div>
          <ul v-show="openPop.index === index && openPop.isOn === true && model.AssignMembers.length" class="transfer_li_ul">
            <li class="quickReSys transfer_li clearBoth" v-for="modelagent in model.AssignMembers" :key="modelagent._id">
              <span class="cata-name ellipsis" @click.stop="transfer(model, 'transferAgent', modelagent)" :title="modelagent.displayName">{{modelagent.displayName}}</span>
              <span class="chatNum">（{{modelagent.chatNum}}{{$t('workbench.businessWait')}}）</span>
            </li>
          </ul>
        </li>
      </ul>
      <div class="prompt" v-show="!onlineAgentsInvite.length && popoLoading === false">{{$t('webchat.noData')}}</div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { deepClone } from '../../../utils/m7Utils'
  export default {
    data () {
      return {
        nameSearch: ''
      }
    },
    props: {
      AssignTreeData: {
        type: Array,
        default: function () {
          return []
        }
      },
      onlineAgentsInvite: {
        type: Array,
        default: function () {
          return []
        }
      },
      popoLoading: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      openPop: {
        type: Object,
        default: function () {
          return {index: -1, isOn: false}
        }
      }
    },
    methods: {
      searchTree () {
        let str = this.nameSearch
        let schStr = str.trim()
        let data = []
        this.openPop.index = -1
        this.openPop.isOn = false
        this.AssignTreeData.forEach((item) => {
//          AssignMembers
          let obj = deepClone(item)
          let dataLi = {
            AssignMembers: []
          }
          let grrowName = obj.DisplayName
          let grrowIdexOf = grrowName.indexOf(schStr)
          if (obj.AssignMembers.length) {
            for (let i = 0; i < obj.AssignMembers.length; i++) {
              let liName = obj.AssignMembers[i].displayName
              if (liName.indexOf(schStr) !== -1) {
                dataLi.AssignMembers.push(obj.AssignMembers[i])
              }
            }
            if (dataLi.AssignMembers.length) {
              obj.AssignMembers = dataLi.AssignMembers
              data.push(obj)
            } else if (grrowIdexOf !== -1) {
              data.push(obj)
            }
          }
        })
        this.$emit('searchTree', this.nameSearch, data)
      },
      togglePop: function (index) {
        this.$emit('togglePop', index)
      },
      transfer (model, type, modelagent) {
        if (modelagent) {
          this.$emit('transfer', model, type, modelagent)
        } else {
          this.$emit('transfer', model, type)
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  @import "./style/webchatCon.styl"
  .transfer_group
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .transfer_li_ul
    .transfer_li
      .cata-name
        display inline-block
        width calc(100% - 70px)
      .chatNum
        display inline-block
        width 70px
        vertical-align top
</style>
